﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/TwoColumn.Master" AutoEventWireup="true"
    CodeBehind="CategoryView.aspx.cs" Inherits="TelerikStore.CategoryView1" %>

<%@ Register Src="~/Views/ProductList_ListView.ascx" TagName="ProductListView" TagPrefix="uc" %>
<%@ Register Src="~/Views/ProductList_Grid.ascx" TagName="ProductGridView" TagPrefix="uc" %>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ApplyFilter">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DisplayPlaceHolder" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="SearchButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DisplayPlaceHolder" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="SearchBox">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DisplayPlaceHolder" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ProductListView">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ProductListView" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ListViewButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DisplayPlaceHolder" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="GridButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DisplayPlaceHolder" LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="">
        <div class="loading">
            <div id="panelContainer">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/common/icons/loading.gif" />
                <h1 class="displayTitle">
                    Fetching data from eBay...</h1>
            </div>
        </div>
    </telerik:RadAjaxLoadingPanel>
    <div id="product-category">
        <h2>
        </h2>
        <div id="search-form">
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    function searchBoxValueChanging(sender, args)
                    {
                        var newValue = args.get_newValue();
                        var oldValue = args.get_oldValue();
                        var catMenu = $telerik.findControl(document, "QuickCategoryMenu");
                        if (!catMenu.get_selectedItem() && oldValue.length > 0 && newValue.length == 0)
                        {
                            args.set_newValue(oldValue);
                        }
                    }

                    function searchButtonClicking(sender, args)
                    {
                        var textBox = $find("<%=SearchBox.ClientID %>")
                        if (textBox.get_value() == "")
                        {
                            args.set_cancel(true);
                        }
                    }

                    function switchViewClicking(sender, args)
                    {
                        args.set_cancel(sender.get_checked());
                    }

                    function searchBoxKeyPress(sender, args) {

                        var code = args.get_keyCode();
                        if (code == 13 && sender.get_textBoxValue() == "") {
                            args.set_cancel(true);
                        }
                    }     
                </script>
            </telerik:RadCodeBlock>
            <telerik:RadTextBox ID="SearchBox" runat="server" EmptyMessage="Search an item..."
                AutoPostBack="true" OnTextChanged="SearchPerformed">
                <ClientEvents OnValueChanging="searchBoxValueChanging" OnKeyPress="searchBoxKeyPress" />
            </telerik:RadTextBox>
            <telerik:RadButton ID="SearchButton" runat="server" AutoPostBack="true" OnClick="SearchPerformed"
                OnClientClicking="searchButtonClicking" />
            <br />
            <span id="SearchError">
                <!-- -->
            </span>
        </div>
    </div>
    <asp:Panel ID="DisplayPlaceHolder" runat="server" CssClass="product-list" Height="716px">
        <div class="view-mode-switcher">
            <telerik:RadButton ID="ListViewButton" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                OnClick="SwitchView_Click" Checked="true" OnClientClicking="switchViewClicking"
                GroupName="StandardButton" CssClass="btn-grid">
                <ToggleStates>
                    <telerik:RadButtonToggleState Value="checked" CssClass="btn-grid-checked" />
                    <telerik:RadButtonToggleState Value="unchecked" />
                </ToggleStates>
            </telerik:RadButton>
            <telerik:RadButton ID="GridButton" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                OnClick="SwitchView_Click" OnClientClicking="switchViewClicking" GroupName="StandardButton"
                CssClass="btn-list">
                <ToggleStates>
                    <telerik:RadButtonToggleState Value="checked" CssClass="btn-list-checked" />
                    <telerik:RadButtonToggleState Value="unchecked" />
                </ToggleStates>
            </telerik:RadButton>
        </div>
        <uc:ProductListView ID="ProductListView" runat="server" />
        <uc:ProductGridView ID="ProductGridView" runat="server" Visible="false" />
    </asp:Panel>
</asp:Content>
<asp:Content ID="LeftContent" ContentPlaceHolderID="LeftSideContent" runat="server">
    <div id="Filter">
        <asp:HiddenField ID="LoadedViewControl" runat="server" />
        <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
            ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode">
        </telerik:RadToolTip>
        <div class="refine-wrap">
            <h3>
                Refine By</h3>
            <span>price</span>
            <table width="220px">
                <tr>
                    <td>
                        0$
                    </td>
                    <td style="float: right;">
                        5000$
                    </td>
                </tr>
            </table>
            <telerik:RadSlider runat="server" ID="PriceSlider" IsSelectionRangeEnabled="true"
                MinimumValue="0" MaximumValue="5000" SelectionStart="0" SelectionEnd="5000" OnClientValueChanging="priceSliderValueChanging"
                OnClientSlideStart="priceSliderSlideStart" OnClientValueChanged="priceSliderValueChanged"
                OnClientSlideEnd="priceSliderSlideEnd" ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
            <br />
            <span>from</span>
            <telerik:RadNumericTextBox ID="StartRange" runat="server" Width="65" ClientEvents-OnValueChanged="startRangeValueChanged"
                NumberFormat-DecimalDigits="0" Value="0">
            </telerik:RadNumericTextBox>
            <span>to</span>
            <telerik:RadNumericTextBox ID="EndRange" runat="server" Width="65" ClientEvents-OnValueChanged="endRangeValueChanged"
                NumberFormat-DecimalDigits="0" Value="5000">
            </telerik:RadNumericTextBox>
            <span>$</span> <span>condition</span>
            <telerik:RadComboBox ID="ConditionComboBox" runat="server" Width="200">
                <Items>
                    <telerik:RadComboBoxItem Text="All" Value="0" />
                    <telerik:RadComboBoxItem Text="New" Value="1000" />
                    <telerik:RadComboBoxItem Text="New Opened" Value="1500" />
                    <telerik:RadComboBoxItem Text="New With Defects" Value="1750" />
                    <telerik:RadComboBoxItem Text="Manufacturer Refurbished" Value="2000" />
                    <telerik:RadComboBoxItem Text="Seller refurbished" Value="2500" />
                    <telerik:RadComboBoxItem Text="Used" Value="3000" />
                    <telerik:RadComboBoxItem Text="Very Good" Value="4000" />
                    <telerik:RadComboBoxItem Text="Good" Value="5000" />
                    <telerik:RadComboBoxItem Text="Acceptable" Value="6000" />
                    <telerik:RadComboBoxItem Text="For Parts" Value="7000" />
                </Items>
            </telerik:RadComboBox>
            <p>
                <telerik:RadButton ID="ApplyFilter" runat="server" Text="Apply Filter" OnClick="ApplyFilterButton_Click">
                </telerik:RadButton>
            </p>
        </div>
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
        <script type="text/javascript">
            var isSliding = false;

            Sys.Application.add_load(function ()
            {
                var categoryMenu = $find('<%= Page.Master.Master.FindControl("FullContent").FindControl("QuickCategoryMenu").ClientID %>');
                var categoryName = categoryMenu.get_selectedItem();
                if (categoryName)
                {
                    $('#product-category h2').html(categoryName.get_text());
                }
                else
                {
                    $('#product-category h2').html("Search Results");
                }
            });

            function ajaxManagerRequestStart(sender, args)
            {
                var panelContainer = document.getElementById('panelContainer');
                var panel1 = $get("<%= DisplayPlaceHolder.ClientID %>");
                panelContainer.style.position = "relative";
                panelContainer.style.top = ((parseInt(panel1.style.height) / 2) - 70) + "px";
            }

            function startRangeValueChanged(sender, args)
            {
                var slider = $find("<%=PriceSlider.ClientID %>");
                slider.set_selectionStart(args.get_newValue());
            }

            function endRangeValueChanged(sender, args)
            {
                var slider = $find("<%=PriceSlider.ClientID %>");
                slider.set_selectionEnd(args.get_newValue());
            }

            function priceSliderValueChanging(sender, args)
            {
                if (!isSliding) return;

                var tooltip = $find("<%= RadToolTip1.ClientID %>");
                resetToolTipLocation(tooltip);
                tooltip.set_text(args.get_newValue());
            }

            function priceSliderValueChanged(sender, args)
            {
                var startRangeInput = $find("<%= StartRange.ClientID %>");
                startRangeInput.set_value(sender.get_selectionStart());

                var endtRangeInput = $find("<%= EndRange.ClientID %>");
                endtRangeInput.set_value(sender.get_selectionEnd());
            }

            function priceSliderSlideStart(sender, args)
            {
                isSliding = true;

                var tooltip = $find("<%= RadToolTip1.ClientID %>");
                showRadToolTip(tooltip, sender);
            }

            function priceSliderSlideEnd(sender, args)
            {
                isSliding = false;

                var startRangeInput = $find("<%= StartRange.ClientID %>");
                startRangeInput.set_value(sender.get_selectionStart());

                var endtRangeInput = $find("<%= EndRange.ClientID %>");
                endtRangeInput.set_value(sender.get_selectionEnd());

                var tooltip = $find("<%= RadToolTip1.ClientID %>");
                tooltip.hide();
            }

            function showRadToolTip(tooltip, slider)
            {
                var activeHandle = slider.get_activeHandle();
                if (!activeHandle) return;

                tooltip.set_targetControl(activeHandle);
                resetToolTipLocation(tooltip);
            }

            function resetToolTipLocation(tooltip)
            {
                if (!tooltip.isVisible())
                    tooltip.show();
                else
                    tooltip.updateLocation();
            }

        </script>
    </telerik:RadCodeBlock>
</asp:Content>
